<template>
	<bigScreenContainer>
		<div class="HomePageClass">
			<!-- header -->
			<!-- <header-nav></header-nav> -->
			<div class="page_header" :style="{
                background: `url(${componentContent.imageMap['bg_head']}) no-repeat`,
                'background-size': '100% 100%',
            }">
				<!-- <div class="page_header"> -->
				<span>腾 洋 采 购 驾 驶 舱</span>
			</div>
			<div class="homeContent">
				<!-- <Menu-list></Menu-list> -->
				<div class="homeBody">
					<div class="home_top">
						<com-box titTxt="采购订单" :tabData="title1" :value.sync="area1" @tabChange="tabChange1">
							<!-- <div class="c_box">
              <div class="c_chart"> -->
							<div class="chart_" v-if="area1 == '采购金额'" ref="caigoujingeDom"></div>
							<div class="chart_" v-else-if="area1 == '采购合同'" ref="caigouhetongDom"></div>
							<div class="chart_" v-else-if="area1 == '采购付款'" ref="caigoufukuanDom"></div>
							<div class="chart_" v-else-if="area1 == '采购应付款'" ref="caigouyingfukuanDom"></div>
							<!-- <div class="chart_" v-if="area1 == '采购金额'" ref="caigoujingeDom" key="caigoujingeDom"></div>
            <div class="chart_" v-else-if="area1 == '采购合同'" ref="caigouhetongDom" key="caigouhetongDom"></div>
            <div class="chart_" v-else-if="area1 == '采购付款'" ref="caigoufukuanDom" key="caigoufukuanDom"></div>
            <div class="chart_" v-else-if="area1 == '采购应付款'" ref="caigouyingfukuanDom" key="caigouyingfukuanDom"></div> -->
							<!-- <com-barpicd ref="ctpjts" refName="domCtpjts"></com-barpicd> -->
							<!-- </div>
            </div> -->
						</com-box>
						<com-box titTxt="采购进度" :tabData="title2" :value.sync="area2" @tabChange="tabChange2">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area2 == '采购总数'" ref="caigouzongshuDom"></div>
									<div class="chart_" v-else-if="area2 == '光学件采购周期'"
										ref="guangxuejiancaigouzhouqiDom"></div>
									<div class="chart_" v-else-if="area2 == '结构件采购周期'" ref="jiegoujiancaigouzhouqiDom">
									</div>
									<div class="chart_" v-else-if="area2 == '到货及时率'" ref="daohuojishiDom"></div>
								</div>
							</div>
						</com-box>
						<com-box titTxt="供应商分析" :tabData="title3" :value.sync="area3" @tabChange="tabChange3">
							<div class="c_box">
								<div class="c_chart">
									<div class="table_" v-if="area3 == '供应商排名'">
										<el-table :data="dataGongYingShang" style="width: 100%"
											:row-class-name="tableRowClassName">
											<el-table-column type="index" label="排名" width="50">
											</el-table-column>
											<el-table-column prop="gysmc" label="供应商">
											</el-table-column>
											<el-table-column prop="htje" label="合同金额" width="100">
											</el-table-column>
											<el-table-column prop="htfs" label="合同份数" width="100">
											</el-table-column>
										</el-table>
									</div>
									<div class="table_" v-else-if="area3 == '地区占比'">
										<el-table :data="dataDiQu" style="width: 100%"
											:row-class-name="tableRowClassName">
											<el-table-column type="index" label="排名" width="50">
											</el-table-column>
											<el-table-column prop="dq" label="地区">
											</el-table-column>
											<el-table-column prop="htje" label="合同金额" width="100">
											</el-table-column>
										</el-table>
									</div>
									<div class="chart_" v-else-if="area3 == '供应变动'" ref="gongyingbiandongDom"
										key="gongyingbiandongDom">
									</div>
									<div class="table_" v-else-if="area3 == '不合格排名'">
										<el-table :data="dataBuHeGe" style="width: 100%"
											:row-class-name="tableRowClassName">
											<el-table-column type="index" label="排名" width="50">
											</el-table-column>
											<el-table-column prop="gysmc" label="供应商">
											</el-table-column>
											<el-table-column prop="cgsl" label="采购数量" width="80">
											</el-table-column>
											<el-table-column prop="bhgsl" label="不合格数量" width="100">
											</el-table-column>
											<el-table-column prop="htfs" label="合同份数" width="80">
											</el-table-column>
										</el-table>
									</div>
								</div>
							</div>
						</com-box>
					</div>
					<div class="home_bottom">
						<com-box titTxt="本期到货统计" :tabData="title4" :value.sync="area4" @tabChange="tabChange4">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area4 == '到货数量'" ref="daohuoshuliangDom"
										key="daohuoshuliangDom"></div>
									<div class="chart_" v-else-if="area4 == '收货数量'" ref="shouhuoshuliangDom"
										key="shouhuoshuliangDom">
									</div>
									<div class="chart_" v-else-if="area4 == '到货合格率'" ref="daohuohegelvDom"
										key="daohuohegelvDom"></div>
								</div>
							</div>
						</com-box>
						<com-box titTxt="到货不合格统计" :tabData="title5" :value.sync="area5" @tabChange="tabChange5">
							<div class="c_box">
								<div class="c_chart">
									<div class="chart_" v-if="area5 == '不合格数'" ref="buhegeshuDom" key="buhegeshuDom">
									</div>
									<div class="chart_" v-else-if="area5 == '不合格率'" ref="buhegelvDom" key="buhegelvDom">
									</div>
									<div class="table_" v-else-if="area5 == '退货排名'">
										<el-table :data="dataTuiHuo" style="width: 100%"
											:row-class-name="tableRowClassName">
											<el-table-column type="index" label="排名" width="50">
											</el-table-column>
											<el-table-column prop="gysmc" label="供应商">
											</el-table-column>
											<el-table-column prop="thsl" label="退货数量" width="100">
											</el-table-column>
											<el-table-column prop="htfs" label="合同份数" width="100">
											</el-table-column>
										</el-table>
									</div>
								</div>
							</div>
						</com-box>
						<com-box titTxt="委外产品" :tabData="title6">
							<div class="chart_" ref="weiwaichanpinDom" key="weiwaichanpinDom"></div>
							<!-- <com-lined ref="gyxf" refName="domGyxf"></com-lined> -->
						</com-box>
					</div>
				</div>
			</div>
		</div>
	</bigScreenContainer>
</template>
<script>
	// import * as echarts from "echarts";
const comBox = {
  // template: `
  //     <div class="ConBoxClass_">
  //         <div class="title_">
  //             {{ titTxt }}
  //         </div>
  //         <div class="tab_" v-if="tabData.length>0">
  //         <div v-for="item in tabData" :style="{background: item.bgColor}" @click="selectTab(item)">
  //             <label>{{ item.bigTitle }}</label>
  //             <span v-if="item.smallTitle" :style="{color: item.lineColor}">{{ item.smallTitle }}</span>
  //             <hr v-if="item.select" :style="{background: item.lineColor}" />
  //         </div>
  //         </div>
  //         <div class="content_">
  //             <slot />
  //         </div>
  //     </div>
  // `,
  props: {
    titTxt: {
      type: String,
      default: "",
    },
    tabData: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    selectTab(item) {
      this.tabData.forEach((it) => {
        it.select = false;
        if (it.bigTitle == item.bigTitle) {
          it.select = true;
        }
      });
      this.$emit("update:value", item.bigTitle);
      this.$emit("tabChange", item.bigTitle);
    },
  },
  render(h) {
    return h(
      "div",
      {
        class: "ConBoxClass_",
        style: {
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
        },
      },
      [
        h(
          "div",
          {
            class: "title_",
            style: {
              textAlign: "center",
              fontSize: "22px",
              color: "#0095ff",
              paddingTop: "20px",
              paddingBottom: "20px",
              height: "60px",
              boxSizing: "border-box",
              flexShrink: "0",
            },
          },
          this.titTxt
        ),
        this.tabData.length > 0
          ? h(
            "div",
            {
              class: "tab_",
              style: {
                height: "60px",
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
                flexShrink: "0",
              },
            },
            this.tabData.map((item) =>
              h(
                "div",
                {
                  style: {
                    background: item.bgColor,
                    flex: 1,
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "center",
                    alignItems: "center",
                    position: "relative",
                  },
                  on: { click: () => this.selectTab(item) },
                },
                [
                  h(
                    "label",
                    {
                      style: {
                        fontSize: "16px",
                        color: "#FFFFFF",
                      },
                    },
                    item.bigTitle
                  ),
                  item.smallTitle
                    ? h(
                      "span",
                      {
                        style: {
                          color: item.lineColor,
                          fontSize: "16px",
                        },
                      },
                      item.smallTitle
                    )
                    : null,
                  item.select
                    ? h("hr", {
                      style: {
                        background: item.lineColor,
                        position: "absolute",
                        width: "100%",
                        height: "2px",
                        border: "none",
                        bottom: "0",
                      },
                    })
                    : null,
                ]
              )
            )
          )
          : null,
        h(
          "div",
          {
            class: "content_",
            style: {
              flex: "auto",
              flexShrink: "0",
              background: "rgba(255, 255, 255, 0.05)",
              overflow: "hidden",
            },
          },
          this.$slots.default
        ),
      ]
    );
  },
};

export default {
    name: "development", // 研发
    components: { comBox },
    data() {
        return {
            componentContent,
            dataGongYingShang: [],
            dataGongYing: [],
            dataBuHeGe: [],
            dataTuiHuo: [],
            dataDiQu: [],
            dataMonth: [],
            title1: [
                {
                    bigTitle: "采购金额",
                    // smallTitle: '6811.69万元',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "采购合同",
                    // smallTitle: '1736份',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "采购付款",
                    // smallTitle: '6790.48万元',
                    bgColor: " rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "采购应付款",
                    // smallTitle: '9763.61万元',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title2: [
                {
                    bigTitle: "采购总数",
                    // smallTitle: '6811.69万元',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "光学件采购周期",
                    // smallTitle: '1736份',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "结构件采购周期",
                    // smallTitle: '6790.48万元',
                    bgColor: " rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "到货及时率",
                    // smallTitle: '9763.61万元',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title3: [
                {
                    bigTitle: "供应商排名",
                    // smallTitle: '',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "地区占比",
                    // smallTitle: '',
                    bgColor: "rgba(70,168,247,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "供应变动",
                    // smallTitle: '',
                    bgColor: "rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "不合格排名",
                    // smallTitle: '',
                    bgColor: "rgba(230,207,92,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title4: [
                {
                    bigTitle: "到货数量",
                    // smallTitle: '352184.47件',
                    bgColor: "rgba(143,205,240,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "收货数量",
                    // smallTitle: '312822.47件',
                    bgColor: "rgba(32,252,255,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "到货合格率",
                    // smallTitle: '88.82%',
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title5: [
                {
                    bigTitle: "不合格数",
                    // smallTitle: '10824件',
                    bgColor: "rgba(32,252,255,0.3)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
                {
                    bigTitle: "不合格率",
                    // smallTitle: '3.07%',
                    bgColor: "rgba(70,168,247,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
                {
                    bigTitle: "退货排名",
                    // smallTitle: '',
                    bgColor: "rgba(230,207,92,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: false,
                },
            ],
            title6: [
                {
                    bigTitle: "委外产品",
                    // smallTitle: '',
                    bgColor: "rgba(32,252,255,0.25)",
                    lineColor: "rgb(7, 125, 238)",
                    select: true,
                },
            ],
            area1: "采购金额",
            area2: "采购总数",
            area3: "供应商排名",
            area4: "到货数量",
            area5: "不合格数",

            option11_data_lastYear: [],
            option11_data_currentYear: [],

            option12_data_lastYear: [],
            option12_data_currentYear: [],

            option13_data_lastYear: [],
            option13_data_currentYear: [],

            option14_data_lastYear: [],
            option14_data_currentYear: [],

            option21_data_lastYear: [],
            option21_data_currentYear: [],

            option22_data_lastYear: [],
            option22_data_currentYear: [],

            option23_data_lastYear: [],
            option23_data_currentYear: [],

            option24_data_lastYear: [],
            option24_data_currentYear: [],

            option31_data_lastYear: [],
            option31_data_currentYear: [],

            option32_data_currentYear: [],

            option41_data_lastYear: [],
            option41_data_currentYear: [],

            option42_data_lastYear: [],
            option42_data_currentYear: [],

            option43_data_lastYear: [],
            option43_data_currentYear: [],

            option51_data_lastYear: [],
            option51_data_currentYear: [],

            option52_data_lastYear: [],
            option52_data_currentYear: [],

            option61_data_currentYear: [],
            tableData31: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "1518 弄",
                },
            ],
            tableData32: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "1518 弄",
                },
            ],
            tableData33: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "1518 弄",
                },
            ],
            tableData53: [
                {
                    date: "2016-05-02",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-04",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-01",
                    name: "王小虎",
                    address: "1518 弄",
                },
                {
                    date: "2016-05-03",
                    name: "王小虎",
                    address: "1518 弄",
                },
            ],
            currentYear: "",
            lastYear: "",
            tuihuo_nameList: [],
            tuihuo_thsl: [],
            tuihuo_htfs: [],
            diqu_nameList: [],
            diqu_htje: [],
            gongyingshang_nameList: [],
            gongyingshang_htje: [],
            gongyingshang_htfs: [],
            buhege_nameList: [],
            buhege_cgsl: [],
            buhege_htfs: [],
            buhege_bhgsl: [],
        };
    },
    computed: {
        option11() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                yAxis: {
                    type: "value",
                    name: "单位：万元",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F2B39D", "#AFE8D8"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(242,179,157,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option11_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(175,232,216,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option11_data_currentYear,
                    },
                ],
            };
        },
        option12() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：份",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F2B39D", "#AFE8D8"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(242,179,157,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option12_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(175,232,216,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option12_data_currentYear,
                    },
                ],
            };
        },
        option13() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：万元",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F2B39D", "#AFE8D8"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(242,179,157,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option13_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(175,232,216,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option13_data_currentYear,
                    },
                ],
            };
        },
        option14() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：万元",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F2B39D", "#AFE8D8"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(242,179,157,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option14_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(175,232,216,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option14_data_currentYear,
                    },
                ],
            };
        },
        option21() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#00FFFF", "#00BFFF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,255,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option21_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option21_data_currentYear,
                    },
                ],
            };
        },
        option22() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：天",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#00FFFF", "#00BFFF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,255,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option22_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option22_data_currentYear,
                    },
                ],
            };
        },
        option23() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：天",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#00FFFF", "#00BFFF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,255,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option23_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option23_data_currentYear,
                    },
                ],
            };
        },
        option24() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#00FFFF", "#00BFFF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,255,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option24_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,255,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option24_data_currentYear,
                    },
                ],
            };
        },
        option31() {
            return {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    orient: "vertical",
                    right: "10%",
                    top: "center",
                    itemWidth: 15,
                    itemHeight: 8,
                    itemGap: 20,
                    textStyle: {
                        color: "#DDDDDD",
                        fontSize: 14,
                    },
                },
                // color: ['#02F3F0', '#0294F5', '#EFE362', '#0BEB8A', '#6060F9', '#6EBDF6'],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: "50%",
                        center: ["40%", "55%"],
                        data: this.dataGongYing,
                        itemStyle: {
                            borderColor: "#2b3841",
                            borderWidth: 1,
                        },
                        label: {
                            formatter: "{b}:{d}%",
                            textStyle: {
                                color: "inherit",
                                fontSize: 14,
                                fontWeight: 600,
                            },
                        },
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: "#DDDDDD",
                            },
                        },
                    },
                ],
            };
        },
        option41() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option41_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(255,136,136,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option41_data_currentYear,
                    },
                ],
            };
        },
        option42() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option42_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(255,136,136,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option42_data_currentYear,
                    },
                ],
            };
        },
        option43() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#5A78B8", "#FF8888"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(90,120,184,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option43_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(255,136,136,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option43_data_currentYear,
                    },
                ],
            };
        },
        option51() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：件",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option51_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option51_data_currentYear,
                    },
                ],
            };
        },
        option52() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：%",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["#F4A460", "#00BFBF"],
                series: [
                    {
                        name: this.lastYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(244,164,96,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option52_data_lastYear,
                    },
                    {
                        name: this.currentYear,
                        type: "line",
                        symbol: "circle",
                        symbolSize: 8,
                        lineStyle: {
                            width: 4
                        },
                        // smooth: true,
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    { offset: 0, color: "rgba(0,191,191,0.3)" }, // 渐变色的起始颜色
                                    { offset: 1, color: "transparent" }, // 渐变色的结束颜色
                                ]
                            ),
                        },
                        data: this.option52_data_currentYear,
                    },
                ],
            };
        },
        option61() {
            return {
                grid: {
                    top: "18%",
                    bottom: "10%",
                    left: "10%",
                    right: "3%",
                },
                xAxis: {
                    type: "category",
                    axisLine: {
                        lineStyle: {
                            color: "#DDDDDD",
                            width: 2,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    data: [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ],
                },
                yAxis: {
                    type: "value",
                    name: "单位：万元",
                    nameTextStyle: {
                        color: "#DDDDDD",
                        padding: [0, 30, 20, 0],
                    },
                    axisLine: {
                        show: false,
                    },
                    axisLabel: {
                        color: "#DDDDDD",
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "dashed",
                            color: "#E6E6E6",
                        },
                    },
                },
                legend: {
                    right: "20",
                    top: "10",
                    textStyle: { color: "#DDDDDD" },
                    itemWidth: 8,
                    itemHeight: 8,
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                color: ["rgba(230, 207, 92, 0.7)"],
                series: [
                    {
                        type: "bar",
                        name: "",
                        barWidth: 20,
                        itemStyle: {
                            barBorderRadius: [10, 10, 0, 0],
                        },
                        data: this.option61_data_currentYear,
                    },
                ],
            };
        },
    },
    created() {
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        currentDate.setFullYear(currentYear - 1);
        const lastYear = currentDate.getFullYear();
        this.currentYear = currentYear;
        this.lastYear = lastYear;
    },
    async mounted() {
        await this.getData();
        this.$nextTick(() => {
            echarts.init(this.$refs.caigoujingeDom).setOption(this.option11);
            echarts.init(this.$refs.caigouzongshuDom).setOption(this.option21);
            // echarts.init(this.$refs.gongyingbiandongDom).setOption(this.option31);
            echarts.init(this.$refs.daohuoshuliangDom).setOption(this.option41);
            echarts.init(this.$refs.buhegeshuDom).setOption(this.option51);
            echarts.init(this.$refs.weiwaichanpinDom).setOption(this.option61);
        });
    },
    methods: {
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 1) {
                return "warning-row";
            } else if (rowIndex === 3) {
                return "success-row";
            }
            return "odd-row";
        },
        async getData() {
            await this.WitGlobal.requestCode(
                "SJKB.CG.db.manage.selectBoardCgY",
                {}
            ).then((res) => {
                if (res.code == 200) {
                    this.dataMonth = res.data;
                    // this.dataMonth = [{"wwcpje":"3",
                    // "bhgl":"33",
                    // "year":"2024",
                    // "cgfk":"15643",
                    // "dhjsl":"123",
                    // "cgje":"22",
                    // "dhsl":"23",
                    // "cgzs":"20",
                    // "jgjcgzq":"21",
                    // "month":"1",
                    // "cgyfk":"15643",
                    // "f_id":"632197588157758405",
                    // "shsl":"21",
                    // "bhgs":"33",
                    // "cght":"22",
                    // "dhslhgl":"33",
                    // "gxjcgzq":"21"}]
                    let monthList = [
                        "01",
                        "02",
                        "03",
                        "04",
                        "05",
                        "06",
                        "07",
                        "08",
                        "09",
                        "10",
                        "11",
                        "12",
                    ];
                    monthList.forEach((month) => {
                        let filetrList = this.dataMonth.filter(
                            (i) => Number(month) == Number(i.month)
                        );
                        let filterCurrentYear = filetrList.filter(
                            (i) => i.year == this.currentYear
                        );
                        if (filterCurrentYear.length > 0) {
                            if (filterCurrentYear[0].cgje)
                                this.option11_data_currentYear.push(
                                    filterCurrentYear[0].cgje
                                );
                            else this.option11_data_currentYear.push(0);
                            if (filterCurrentYear[0].cght)
                                this.option12_data_currentYear.push(
                                    filterCurrentYear[0].cght
                                );
                            else this.option12_data_currentYear.push(0);
                            if (filterCurrentYear[0].cgfk)
                                this.option13_data_currentYear.push(
                                    filterCurrentYear[0].cgfk
                                );
                            else this.option13_data_currentYear.push(0);
                            if (filterCurrentYear[0].cgyfk)
                                this.option14_data_currentYear.push(
                                    filterCurrentYear[0].cgyfk
                                );
                            else this.option14_data_currentYear.push(0);
                            if (filterCurrentYear[0].cgzs)
                                this.option21_data_currentYear.push(
                                    filterCurrentYear[0].cgzs
                                );
                            else this.option21_data_currentYear.push(0);
                            if (filterCurrentYear[0].gxjcgzq)
                                this.option22_data_currentYear.push(
                                    filterCurrentYear[0].gxjcgzq
                                );
                            else this.option22_data_currentYear.push(0);
                            if (filterCurrentYear[0].jgjcgzq)
                                this.option23_data_currentYear.push(
                                    filterCurrentYear[0].jgjcgzq
                                );
                            else this.option23_data_currentYear.push(0);
                            if (filterCurrentYear[0].dhjsl)
                                this.option24_data_currentYear.push(
                                    filterCurrentYear[0].dhjsl
                                );
                            else this.option24_data_currentYear.push(0);
                            if (filterCurrentYear[0].dhsl)
                                this.option41_data_currentYear.push(
                                    filterCurrentYear[0].dhsl
                                );
                            else this.option41_data_currentYear.push(0);
                            if (filterCurrentYear[0].shsl)
                                this.option42_data_currentYear.push(
                                    filterCurrentYear[0].shsl
                                );
                            else this.option42_data_currentYear.push(0);
                            if (filterCurrentYear[0].dhslhgl)
                                this.option43_data_currentYear.push(
                                    filterCurrentYear[0].dhslhgl
                                );
                            else this.option43_data_currentYear.push(0);
                            if (filterCurrentYear[0].bhgs)
                                this.option51_data_currentYear.push(
                                    filterCurrentYear[0].bhgs
                                );
                            else this.option51_data_currentYear.push(0);
                            if (filterCurrentYear[0].bhgl)
                                this.option52_data_currentYear.push(
                                    filterCurrentYear[0].bhgl
                                );
                            else this.option52_data_currentYear.push(0);
                            if (filterCurrentYear[0].wwcpje)
                                this.option61_data_currentYear.push(
                                    filterCurrentYear[0].wwcpje
                                );
                            else this.option61_data_currentYear.push(0);
                        } else {
                            this.option11_data_currentYear.push(0);
                            this.option12_data_currentYear.push(0);
                            this.option13_data_currentYear.push(0);
                            this.option14_data_currentYear.push(0);
                            this.option21_data_currentYear.push(0);
                            this.option22_data_currentYear.push(0);
                            this.option23_data_currentYear.push(0);
                            this.option24_data_currentYear.push(0);
                            this.option41_data_currentYear.push(0);
                            this.option42_data_currentYear.push(0);
                            this.option43_data_currentYear.push(0);
                            this.option51_data_currentYear.push(0);
                            this.option52_data_currentYear.push(0);
                            this.option61_data_currentYear.push(0);
                        }
                        let filterLastYear = filetrList.filter(
                            (i) => i.year == this.lastYear
                        );
                        if (filterLastYear.length > 0) {
                            if (filterLastYear[0].cgje)
                                this.option11_data_lastYear.push(
                                    filterLastYear[0].cgje
                                );
                            else this.option11_data_lastYear.push(0);
                            if (filterLastYear[0].cght)
                                this.option12_data_lastYear.push(
                                    filterLastYear[0].cght
                                );
                            else this.option12_data_lastYear.push(0);
                            if (filterLastYear[0].cgfk)
                                this.option13_data_lastYear.push(
                                    filterLastYear[0].cgfk
                                );
                            else this.option13_data_lastYear.push(0);
                            if (filterLastYear[0].cgyfk)
                                this.option14_data_lastYear.push(
                                    filterLastYear[0].cgyfk
                                );
                            else this.option14_data_lastYear.push(0);
                            if (filterLastYear[0].cgzs)
                                this.option21_data_lastYear.push(
                                    filterLastYear[0].cgzs
                                );
                            else this.option21_data_lastYear.push(0);
                            if (filterLastYear[0].gxjcgzq)
                                this.option22_data_lastYear.push(
                                    filterLastYear[0].gxjcgzq
                                );
                            else this.option22_data_lastYear.push(0);
                            if (filterLastYear[0].jgjcgzq)
                                this.option23_data_lastYear.push(
                                    filterLastYear[0].jgjcgzq
                                );
                            else this.option23_data_lastYear.push(0);
                            if (filterLastYear[0].dhjsl)
                                this.option24_data_lastYear.push(
                                    filterLastYear[0].dhjsl
                                );
                            else this.option24_data_lastYear.push(0);
                            if (filterLastYear[0].dhsl)
                                this.option41_data_lastYear.push(
                                    filterLastYear[0].dhsl
                                );
                            else this.option41_data_lastYear.push(0);
                            if (filterLastYear[0].shsl)
                                this.option42_data_lastYear.push(
                                    filterLastYear[0].shsl
                                );
                            else this.option42_data_lastYear.push(0);
                            if (filterLastYear[0].dhslhgl)
                                this.option43_data_lastYear.push(
                                    filterLastYear[0].dhslhgl
                                );
                            else this.option43_data_lastYear.push(0);
                            if (filterLastYear[0].bhgs)
                                this.option51_data_lastYear.push(
                                    filterLastYear[0].bhgs
                                );
                            else this.option51_data_lastYear.push(0);
                            if (filterLastYear[0].bhgl)
                                this.option52_data_lastYear.push(
                                    filterLastYear[0].bhgl
                                );
                            else this.option52_data_lastYear.push(0);
                        } else {
                            this.option11_data_lastYear.push(0);
                            this.option12_data_lastYear.push(0);
                            this.option13_data_lastYear.push(0);
                            this.option14_data_lastYear.push(0);
                            this.option21_data_lastYear.push(0);
                            this.option22_data_lastYear.push(0);
                            this.option23_data_lastYear.push(0);
                            this.option24_data_lastYear.push(0);
                            this.option41_data_lastYear.push(0);
                            this.option42_data_lastYear.push(0);
                            this.option43_data_lastYear.push(0);
                            this.option51_data_lastYear.push(0);
                            this.option52_data_lastYear.push(0);
                        }
                    });
                }
            });
            await this.WitGlobal.requestCode('SJKB.CG.db.manage.selectThpm', {}).then(res => {
                if (res.code == 200) {
                    this.dataTuiHuo = res.data.slice(0, 5);
                    // this.dataName = [{ "rypm_name": "张三", "wtyyfb_yy": "不清晰", "wtyyfb_wtgs": 12, "f_id": "634705400817549189", "rypm_ctsl": "12" }, { "rypm_name": "李四", "f_id": "634739696777330501", "rypm_ctsl": "1" }]
                    this.dataTuiHuo.forEach(item => {
                        if (item.gysmc && item.thsl) {
                            this.tuihuo_nameList.unshift(item.gysmc)
                            this.tuihuo_thsl.unshift(item.thsl)
                            this.tuihuo_htfs.unshift(item.htfs)
                        }
                    })
                }
            });
            await this.WitGlobal.requestCode('SJKB.CG.db.manage.selectBoardCgGysfxDq', {}).then(res => {
                if (res.code == 200) {
                    this.dataDiQu = res.data.slice(0, 5);
                    this.dataDiQu.forEach(item => {
                        if (item.dq && item.htje) {
                            this.diqu_nameList.unshift(item.dq)
                            this.diqu_htje.unshift(item.htje)
                        };
                    })
                }
            });
            await this.WitGlobal.requestCode('SJKB.CG.db.manage.selectByHtje', {}).then(res => {
                if (res.code == 200) {
                    this.dataGongYingShang = res.data.slice(0, 5);
                    // this.dataName = [{ "rypm_name": "张三", "wtyyfb_yy": "不清晰", "wtyyfb_wtgs": 12, "f_id": "634705400817549189", "rypm_ctsl": "12" }, { "rypm_name": "李四", "f_id": "634739696777330501", "rypm_ctsl": "1" }]
                    this.dataGongYingShang.forEach(item => {
                        if (item.gysmc && item.htje) {
                            this.gongyingshang_nameList.unshift(item.gysmc)
                            this.gongyingshang_htje.unshift(item.htje)
                            this.gongyingshang_htfs.unshift(item.htfs)
                        }
                    })
                }
            });
            await this.WitGlobal.requestCode('SJKB.CG.db.manage.selectBoardCgGysfxCount', {}).then(res => {
                if (res.code == 200) {
                    this.dataGongYing = res.data.map(item => {
                        if (item.count && item.type) {
                            return { value: item.count, name: item.type }
                        };
                    })
                }
            });
            await this.WitGlobal.requestCode('SJKB.CG.db.manage.selectByBhgsl', {}).then(res => {
                if (res.code == 200) {
                    this.dataBuHeGe = res.data.slice(0, 5);
                    this.dataBuHeGe.forEach(item => {
                        if (item.gysmc && item.bhgsl) {
                            this.buhege_nameList.unshift(item.gysmc)
                            this.buhege_bhgsl.unshift(item.bhgsl)
                            this.buhege_cgsl.unshift(item.cgsl)
                            this.buhege_htfs.unshift(item.htfs)
                        }
                    })
                }
            });
        },
        tabChange1(name) {
            if (name == "采购金额") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.caigoujingeDom)
                        .setOption(this.option11);
                });
            } else if (name == "采购合同") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.caigouhetongDom)
                        .setOption(this.option12);
                });
            } else if (name == "采购付款") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.caigoufukuanDom)
                        .setOption(this.option13);
                });
            } else if (name == "采购应付款") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.caigouyingfukuanDom)
                        .setOption(this.option14);
                });
            }
        },
        tabChange2(name) {
            if (name == "采购总数") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.caigouzongshuDom)
                        .setOption(this.option21);
                });
            } else if (name == "光学件采购周期") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.guangxuejiancaigouzhouqiDom)
                        .setOption(this.option22);
                });
            } else if (name == "结构件采购周期") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.jiegoujiancaigouzhouqiDom)
                        .setOption(this.option23);
                });
            } else if (name == "到货及时率") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.daohuojishiDom)
                        .setOption(this.option24);
                });
            }
        },
        tabChange3(name) {
            if (name == '供应商排名') {
                this.$nextTick(() => {
                    // echarts.init(this.$refs.gongyingshangpaimingDom).setOption(this.option31);
                })
            } else if (name == '地区占比') {
                this.$nextTick(() => {
                    // echarts.init(this.$refs.diquzhanbiDom).setOption(this.option32);
                })
            } else if (name == '供应变动') {
                this.$nextTick(() => {
                    echarts.init(this.$refs.gongyingbiandongDom).setOption(this.option31);
                })
            } else if (name == '不合格排名') {
                this.$nextTick(() => {
                    // echarts.init(this.$refs.buhegepaimingDom).setOption(this.option34);
                })
            }
        },
        tabChange4(name) {
            if (name == "到货数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.daohuoshuliangDom)
                        .setOption(this.option41);
                });
            } else if (name == "收货数量") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.shouhuoshuliangDom)
                        .setOption(this.option42);
                });
            } else if (name == "到货合格率") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.daohuohegelvDom)
                        .setOption(this.option43);
                });
            }
        },
        tabChange5(name) {
            if (name == "不合格数") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.buhegeshuDom)
                        .setOption(this.option51);
                });
            } else if (name == "不合格率") {
                this.$nextTick(() => {
                    echarts
                        .init(this.$refs.buhegelvDom)
                        .setOption(this.option52);
                });
            }
        },
    },
};
</script>
<style lang="scss" scoped>
	.el-table .warning-row {
		background: rgb(52, 57, 70);
	}

	.el-table .success-row {
		background: rgb(52, 57, 70);
	}

	.el-table .odd-row {
		background: rgb(29, 35, 49);
	}

	.el-table .el-table__cell {
		font-size: 16px !important;
		text-align: center;
	}

	.el-table th {
		background-color: rgb(29, 35, 49);
		color: #409eff;
	}

	.el-table {
		background: rgb(29, 35, 49);
		color: #dddddd;
	}

	// .el-table__header-wrapper .cell{
	//   padding-left: 0px !important;
	// }

	.table_ {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.05);
		padding: 30px 20px 20px 20px;
	}

	.chart_ {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 0.05);
	}

	.page_header {
		height: 80px;
		line-height: 70px;
		background: url(./top.png) no-repeat;
		background-size: cover;
		font-weight: 600;
		font-size: 24px;
		color: #ffffff;
		text-align: center;
        span{
            font-weight: 600;
            font-size: 40px;
            color: #ffffff;
            text-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
            background: linear-gradient(0deg, #99bbff 0%, #ffffff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
            padding-top: 36px;
        }
	}

	.HomePageClass {
		width: 1920px;
		height: 1080px;
		background: #111726;
		display: flex;
		flex-direction: column;

		.homeContent {
			flex: auto;
			position: relative;
			margin-top: -60px;

			.homeBody {
				width: 100%;
				height: calc(100% - 65px);
				margin-top: 65px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				padding: 0 40px 40px 40px;

				&>div {
					flex: 1;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					&>div {
						flex: 1;

						&:not(:last-child) {
							margin-right: 40px;
						}
					}
				}

				.c_box {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;

					.c_title {
						padding-left: 42px;
						margin-top: 26px;

						span {
							font-size: 24px;
							color: #ffffff;
							margin-right: 16px;
						}

						label {
							font-weight: 600;
							font-size: 28px;
							color: #ffffff;
						}
					}

					.c_chart {
						flex: auto;
					}
				}

				.home_top {
					height: 480px;
				}

				.home_bottom {
					height: 480px;
				}
			}
		}
	}
</style>